<template>
  <view class="wrap">
    <view class="viewItem u-flex">
      <view class="item_title">车辆名称</view>
      <view class="item_info u-flex-1">
        这Ian展示车辆名称
      </view>
    </view>
     <view class="viewItem u-flex">
      <view class="item_title">车辆名称</view>
      <view class="item_info u-flex-1">
        这Ian展示车辆名称
      </view>
    </view>
    <view class="viewItem u-flex">
      <view class="item_title">车辆图片</view>
      <view class="item_info u-flex-1">
        <image src="@/static/images/car1.jpeg" mode="widthFix"></image>
      </view>
    </view>
    <view class="viewItem u-flex">
      <view class="item_title">车辆保养手册</view>
      <view class="item_info u-flex-1">
        <image src="@/static/images/book.jpg" mode="widthFix" @click="openPage('/pages/workbench/logistics/handbook')"></image>
      </view>
    </view>
    <view class="viewItem u-flex">
      <view class="item_title">车辆状态</view>
      <view class="item_info u-flex-1">
        <text class="u-type-success">正常</text>
      </view>
    </view>
     <view class="operBtn">
        <u-button type="primary">报修</u-button>
        <u-button type="primary">保养</u-button>
      </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    },
    methods: {
      openPage(path) {
        this.$u.route({ 
          url: path
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
.wrap{
  padding:0 20rpx;
}
.viewItem{
  padding:20rpx 0;
  border-bottom:1px solid #d9d9d9;
  .item_title{
    margin-right: 20rpx;
  }
  .item_info{
    color:#666;
    font-size:24rpx;
    overflow: hidden;
    image{
      width: 100rpx;
	  height:100rpx;
      float: left;
      margin:0 20rpx 20rpx 0;
    }
  }
}
.operBtn{
  margin:20rpx;
  button{
    margin-bottom:20rpx;
  }
}
</style>